window.onload = function(){
  // 1. 获取节点
  var username = document.getElementById('username')
  var password = document.getElementById('password')
  var btnLogin = document.getElementById('js-btn-login')

  // 2. 定义一个创建错误节点的方法
  function createErrorElement(target,id,text){
     // 创建警告节点内容
     var errNode = document.createElement('p')
     errNode.id = id
     errNode.innerHTML = text
     errNode.style.cssText = "color:red;font-size:12px;text-align:left;text-indent: 10px;"
     // 插入警告节点
     target.parentNode.insertBefore(errNode,target.nextSibling)
  }

  // 3. 绑定失去焦点判断事件
  // 3.1 用户名的校验（失去焦点判断）
  function userNameValidate(){
    var errNode = document.getElementById('mobileError')
    // 为空的判断
    if(username.value.trim().length === 0){
      // 有节点移除
      if(errNode) errNode.parentNode.removeChild(errNode)
      // 创建错误节点，挂载
      createErrorElement(username,'mobileError','请输入手机号')
      return false
    }
    // 格式校验
    var reg = /^1[3|5|7|8]\d{9}$/
    if(!reg.test(username.value)){
      // 有节点移除
      if(errNode) errNode.parentNode.removeChild(errNode)
       // 去掉关闭按钮
       password.parentNode.querySelector('.close').style.display = 'none'
      // 创建错误节点，挂载
      createErrorElement(username,'mobileError','手机格式不正确')
      return false
    }
    // 没有问题，存在错误节点就移除节点
    if(errNode) errNode.parentNode.removeChild(errNode)
    return true
  }
  username.onblur = userNameValidate
  // 3.2 密码的校验（失去焦点判断）
  function passwordValidate(){
    var errNode = document.getElementById('passwordError')
    // 为空的判断
    if(password.value.trim().length === 0){
      // 有节点移除
      if(errNode) errNode.parentNode.removeChild(errNode)
      // 去掉关闭按钮
      password.parentNode.querySelector('.close').style.display = 'none'
      // 创建错误节点，挂载
      createErrorElement(password,'passwordError','请输入密码')
      return  false
    }
    // 没有问题，存在错误节点就移除节点
    if(errNode) errNode.parentNode.removeChild(errNode)
    return true
  }
  password.onblur = passwordValidate

  // 4. 输入值后显示删除按钮,点击删除改行内容
  var closeUser = username.previousElementSibling
  var closePwd = password.previousElementSibling
  // 输入值后显示删除按钮
  username.onkeyup = function(){
    if(this.value) closeUser.style.display = 'block'
  }
  password.onkeyup = function(){
    if(this.value) closePwd.style.display = 'block'
  }
  // 点击删除改行内容
  closeUser.onclick = function(){
    username.value = ''
    var errNode = document.getElementById('mobileError')
    if(errNode) errNode.parentNode.removeChild(errNode)
    this.style.display = 'none'
  }
  closePwd.onclick = function(){
    password.value = ''
    var errNode = document.getElementById('passwordError')
    if(errNode) errNode.parentNode.removeChild(errNode)
    this.style.display = 'none'
  }

  // 5. 登录按钮表单提交
  btnLogin.onclick = function(e){
    e.preventDefault()
    // 4.1表单验证
    var validValid = userNameValidate()
    var pwdValid = passwordValidate()
    if(!validValid || !pwdValid){
      return alert('数据校验不通过')
    }
    // 建议思考：如果表单校验错误， 为什么这里是先弹出alert， 后渲染了错误节点内容
    // 4.2 执行表单提交逻辑
    alert('登录成功\n'+'用户名是:'+username.value+',密码是:'+password.value)
  }
}